{% extends 'base.html' %}
{% block head %}
	<link href="{{ path }}js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
	<link href="{{ path }}js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet"> 
    
    <script src="{{ path }}js/demos/demo.tables.js"></script>
    <script src="{{ path }}js/plugins/datatables/jquery.dataTables.js"></script>
    <script src="{{ path }}js/plugins/datatables/DT_bootstrap.js"></script>
	<script src="{{ path }}js/plugins/responsive-tables/responsive-tables.js"></script>

{% endblock %}
	
{% block jquery %}	
	buscar();
    
	$("#facultad").change(function () {
		$('#semestre').find('option').remove().end();
		$("#facultad option:selected").each(function () {
			semestres = $(this).attr("semestres") + " ";
		});
         
        for(i=0; i<=semestres; i++){
            $('#semestre').append($('<option></option>').attr('value', (i) ).text((i)));
        }
		
	});
        
	
    function buscar() {
    	texto = $('#texto').attr('value');
        periodo = $('#periodo').attr('value');
        facultad = $('#facultad').attr('value');
        semestre = $('#semestre').attr('value');
        
        $.ajax({
            url: "/cartera/buscar/resultados/",
            type: "POST",
            data : {texto:texto, 
            		periodo:periodo, 
                    facultad:facultad, 
                    semestre:semestre,
                    csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                     },
            dataType: "html",
            success: function(datos) {
                $('#resultados').html(datos);
            }
        });
	}
    
    $("#btn_buscar").click(buscar);
    $("#texto").keyup(function(e) {
        if(e.which == 13) {
            buscar();
        }
    });
{% endblock %}

{% block ruta %}

{% endblock %}

{% block contenido %}
	{{ request.session.control }}
    	
		<div class="span12">
	    	<div id="horizontal" class="widget widget-form">
	      		<div class="widget-header">
                    <h3>Listado de Estudiantes</h3>	      				
                </div> <!-- /.widget-header -->
                
                <div class="widget-content">
                	<div class="form-horizontal">
                	<div id="csrf_token">{% csrf_token %}</div>	
                    
                    	<table width="100%">
                        	<tr><td width="50%">
                                <div class="control-group">
                                    <label class="control-label" for="input01">Nombre o Identificación:</label>
                                    <div class="controls">
                                        <input type="search" class="input-large" autofocus name="texto" id="texto" size="65" placeholder="Estudiante a buscar"/>
                                    </div>
                                </div>
                            </td>
                            <td  width="50%">
                                <div class="control-group">
                                    <label class="control-label" for="input01">Facultad:</label>
                                    <div class="controls">
                                        <select name="facultad" id="facultad" class="input-large">
	                                        <option semestres="0" value="0">NINGUNA</option>
                                            {% for facultad in Facultades %}
                                                <option semestres="{{ facultad.semestres }}" value="{{ facultad.id }}">{{ facultad.sigla }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                        	</td></tr>
                            <tr><td>
                                <div class="control-group">
                                    <label class="control-label" for="input02">Periodo:</label>
                                    <div class="controls">
                                        <select name="periodo" id="periodo" class="input-large">
                                            <option value="0">TODOS</option>
                                            {% for periodo in Periodos %}
                                                <option value="{{ periodo.id }}">{{ periodo.nombre }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>    
                                <div class="control-group">
                                    <label class="control-label" for="input01">Semestre:</label>
                                    <div class="controls">
                                        <select name="semestre" id="semestre" class="input-large" >
                                            <option value="0">0</option>
                                        </select>
                                    </div>
                                </div>
							</td></tr>
                            </table>
                	</div>
                    <table width="100%" class="form-actions">
                        <tr><td width="50%" style="text-align:center"><button type="button" class="btn btn-primary btn-large" id="btn_buscar">Buscar</button></td>
                        <td width="50%" style="text-align:center"><a href="/cartera/estudiantes" class="btn btn-primary btn-large">Nuevo Estudiante</a></td></tr>
                    </table>                    
				
    			</div>
			</div>
	</div>
	<div id="resultados">
        
    </div>
{% endblock %}